<template>
  <div>
    <h1>原生实现下拉刷新</h1>
    <el-table
      id="tableId"
      ref="myTable"
      border
      :data="tableData"
      style="width: 800px; margin: 15vh auto 0"
    >
      <el-table-column prop="id" label="编号" align="center"> </el-table-column>
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
console.log("this", this);
let timer = null;
export default {
  data() {
    return {
      myTable: null,
      tableData: [],
      pageOb: {
        page: 1,
        pageSize: 8,
      },
    };
  },
  methods: {
    aa: (e) => {
      console.log("e", e);
      console.log("this:", this); // 打印undefined  windows严格模式下是undefined
    },
    async getData() {
      let res = await axios({
        method: "get",
        url: `http://192.168.1.7:3000/api/getData?page=${this.pageOb.page}&pageSize=${this.pageOb.pageSize}`,
      });
      console.log("res:", res);
      this.tableData = res.data.data;
    },
    scrollEvet(e) {
      console.log("e", e);
      // console.log("this:", this); //打印VueComponent ， 不是指向滚动的那个元素，而是指向vue
      let elFather = document.querySelector(
        "#tableId > .el-table__body-wrapper"
      );
      let elSon = document.querySelector(
        ".el-table__body-wrapper>.el-table__body"
      );
      console.log("elSon", elSon);
      let fH = elFather.clientHeight;
      let sH = elSon.clientHeight;
      let top = elFather.scrollTop;

      if (sH - fH + 5 >= top) {
        this.pageOb.pageSize += 1;
        clearTimeout(timer);
        timer = setTimeout(() => {
          this.getData();
          console.log("调用接口啦");
        }, 500);
      }
    },
    initScroll() {
      // 这个 拿到的是组件实例而不是节点
      // console.dir(this.$refs.myTable);
      let ele = document.querySelector("#tableId > .el-table__body-wrapper");
      console.log("ele:", ele);
      // 第一种分析
      // ele.addEventListener("scroll", (e)=>{
      //   console.log("e", e);
      //   console.log("this", this); // 箭头函数的话，this由创建的时候指定：指向vue
      // });
      // ele.addEventListener("scroll", function (e) {
      //   console.log("e", e);
      //   console.log("this", this); // 普通函数情况下： 指向触发滚动的元素
      // });
      // 第二种分析
      ele.addEventListener("scroll", this.scrollEvet);
    },
  },
  async mounted() {
    await this.getData();
    this.initScroll();
  },
};
</script>

<style scoped>
/deep/ .el-table__body-wrapper {
  height: 200px;
  overflow: auto;
  overflow-x: hidden;
}
</style>
